<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线人数统计</title>
    <script>
        function get(url, callback) {
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = () => {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    var json = ajax.responseText;
                    console.log(json);
                    var result = JSON.parse(json);
                    callback(result);

                }
            }
            ajax.open("get",url);
            ajax.send(null);
        }
        function refresh(){
            var num = document.querySelector('#num');
            var man = document.querySelector('#man');
            var url = "../OnlineServlet";
            get(url,function (json){
                num.innerText = "共有 " + json.length + "人在线";
                man.innerHTML = "";
                var html = "";
                for (const objElement of json) {
                    html += "<li><label>" + objElement.name + "</label><small>" + objElement.date + "</small></li>"
                }
                man.innerHTML = html;
            })
        }
        setInterval(refresh, 10000);
    </script>
</head>
<body onload="refresh()">
<fieldset>
    <legend>在线人数统计</legend>
    <dl>
        <dt id="num"></dt>
        <dd>
            <ol id="man">
<!--                <li><label>曹盖</label><small>在线3小时06分钟</small></li>-->
<!--                <li><label>鲁智深</label><small>在线4小时13分钟</small></li>-->
<!--                <li><label>扈三娘</label><small>在线5小时33分钟</small></li>-->
<!--                <li><label>燕青</label><small>在线2小时24分钟</small></li>-->
<!--                <li><label>花荣</label><small>在线1小时25分钟</small></li>-->
            </ol>
        </dd>
    </dl>
</fieldset>

</body>
</html>


<style>
    * {
        vertical-align: middle;
        text-decoration: none;
    }

    fieldset {
        width: 50%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        line-height: 30px;
        vertical-align: middle;
        color: red
    }

    input>small>span>small>select {
        min-width: 200px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    label {
        min-width: 70px;
        display: inline-block;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    small{
        color: #999999;
        margin-left: 20px;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>